//疑似基金流失
<template>
  <div class="JiJinLiuShi">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s30">
          <li class="flexC JustifyContentFE flex2 textC cursor">
            <p>2.3级老人月服务大于14次或</p>
            <p>4级老人月服务大于23次</p>
          </li>
        </ul>
      </div>
      <div class="flexC modal_main">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22">
          <li class="flex2 textC">序号</li>
          <li class="flex2 textC">老人姓名</li>
          <li class="flex3 textC">所在机构</li>
          <li class="flex2 textC">月均服务次数</li>
          <li class="flex2 textC">评估等级</li>
          <li class="flex2 textC">处置人</li>
          <li class="flex2 textC">处置状态</li>
          <li class="flex2 textC">完成时间</li>
          <li class="flex4 textC">处置结果</li>
        </ul>
        <div style="height: 50vh;" class="superviseList font_s20">
          <ul v-for="(item, index) in dataList" class="Inv_ulb flex colorF Bold textC" :key="'list' + index">
            <li class="flex2">{{ (current - 1) * pageSize + index + 1 }}</li>
            <li class="flex2 textC">{{ item.bjgdx }}</li>
            <li class="flex3 textC">{{ item.jgmc }}</li>
            <li class="flex2 textC">{{ item.jgwtms }}</li>
            <li class="flex2 textC">{{ item.fkyj }}</li>
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czr }}</li>
            <!-- 处置人 -->
            <li class="flex2" style="padding: 0.625rem 0">{{ item.czzt }}</li>
            <!-- 处置状态 -->
            <li class="flex2">{{ item.czwcsj }}</li>
            <!-- 完成时间 -->
            <!-- 点击显示PDF内容 -->
            <li class="flex4 textC" :class="{ cursor: item.fjlb.length }" @click="showPdf(item)">{{ item.czjg }}</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="wrapper"><pagination v-show="showPage" :total="total" :current="current" :pageSize="pageSize" @getPageSize="getPageSize" @jump="jump"></pagination></div>
    <!-- 条件查询没有符合条件的数据时显示提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showErrorMessage"><p>没有符合条件的数据</p></div>
    <!-- 数据加载中的提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showWaitingMessage"><p>数据加载中，请等待...</p></div>
    <!-- 组件引用：信访投诉显示PDF -->
    <YiBaoRect03 v-if="choosePDF" @hidden="hiddenRect(choosePDF)" class="superviseList">
      <div v-for="(item, index) in srcPDF" :key="index" style="width: 100%;height: 100%;">
        <iframe :src="item.fjlj" scrolling="yes" style="width: 100%;height: 100%;" frameborder="0" allowfullscreen="true"></iframe>
      </div>
    </YiBaoRect03>
  </div>
</template>
<script>
// 显示PDF文件的弹窗
import YiBaoRect03 from '@/components/YiBaoRect03'
export default {
  name: 'JiJinLiuShi',
  components: {
    YiBaoRect03,
    pagination: resolve => {
      require(['@/components/pagination'], resolve)
    }
  },
  data () {
    return {
      // 分页参数
      total: 20, // 总页数
      current: 1, // 当前页面下标
      pageSize: 10, // 页面显示条数
      showPage: true, // 显示隐藏分页
      category: 1,
      arr1: [],
      dataList: [],

      // 无符合筛选条件显示内容
      showErrorMessage: false,
      showWaitingMessage: false,
      // PDF在服务器端的路径
      choosePDF: false,
      pdfUrl: '',
      srcPDF: []
    }
  },

  mounted () {
    this.getData()
  },
  methods: {
    // 分页
    jump (index) {
      this.current = index
      this.getData()
    },
    getPageSize (pageSize) {
      this.current = 1
      this.pageSize = pageSize
      this.getData()
    },
    hiddenRect (choose) {
      if (choose === this.choosePDF) {
        this.choosePDF = false
        // 清空数据
        this.srcPDF = []
      }
    },
    showPdf (pdfItem) {
      if (pdfItem.fjlb.length !== 0) {
        this.choosePDF = true
        // this.yutanpdf = pdfItem.fjlb[0].fjlj;
        this.srcPDF = pdfItem.fjlb
      }
    },
    getData () {
      this.showPage = true
      this.showErrorMessage = false
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      this.$http.post(this.$api.TotalList.totalList, 'jglx=231' + '&page=' + this.current + '&limit=' + this.pageSize, true).then(result => {
        this.dataList = result.data.result
        if (this.dataList.length === 0) {
          this.showPage = false
          this.showErrorMessage = true
          this.showWaitingMessage = false
        } else {
          this.showWaitingMessage = false
        }
        // 总页数
        this.total = Math.ceil(result.data.count / this.pageSize)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.JiJinLiuShi {
  width: 100%;
  height: 100%;
  .wrapper {
    height: 100%;
    width: 100%;
  }
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    margin: 1.285rem auto 0.825rem;
    color: rgba($color: #04a5ff, $alpha: 0.8);
    font-weight: bold;
  }
  .Inv_ula {
    width: 100%;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
    padding: 0.625rem 0;
    box-sizing: border-box;
  }
  .Inv_ulb {
    width: 100%;
    font-weight: bold;
    li {
      padding: 0.625rem 0;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
